<template>
  <div class="travel-info">
    <!-- 标题信息 -->
    <div class="info-title">
      <div class="info-select">选择出行信息</div>
      <div class="info-start">从丽江出发</div>
    </div>

    <div class="calendar">
      <div class="left-label">
        <i class="iconfont">&#xe602;</i>
        <span>团期选择</span>
      </div>
      <div class="middle-select">
        <!-- 循环这个盒子 -->
        <div
          class="data-item"
          :class="{ actived: isSelect == index }"
          v-for="(timeItem, index) in timeArray"
          :key="timeItem.time"
          @click="selectTravelTime(timeItem, index)"
        >
          <span>{{ timeItem.time }}</span>
          <span>￥{{ timeItem.price }}</span>
          <span class="tag iconfont" v-show="isSelect == index ? true : false"
            >&#xebe6;</span
          >
        </div>
      </div>
      <div class="right-more" @click="show = true">
        <span>
          <i class="iconfont">&#xe811;</i>
        </span>
        <span> 更多 </span>
      </div>
      <van-calendar
        v-model:show="show"
        @confirm="onConfirm"
        color="#FF6600"
        :min-date="minDate"
        :max-date="maxDate"
        :formatter="setPrice"
      />
    </div>
  </div>
</template>

<script>
import { ref, reactive, toRefs } from "vue";
export default {
  setup() {
    const show = ref(false);
    const date = ref("");
    let isSelect = ref(0);
    const year = new Date().getYear(),
      mounth = new Date().getMonth(),
      day = new Date().getDate();
    const state = reactive({
      minDate: new Date(),
      maxDate: new Date(year + 1900, mounth, day+3),
      timeArray: [
        {
          time: "03/01 周一",
          price: 3699,
        },
        {
          time: "03/02 周二",
          price: 3699,
        },
        {
          time: "03/03 周三",
          price: 3699,
        },
        {
          time: "03/04 周四",
          price: 3699,
        },
        {
          time: "03/05 周五",
          price: 3699,
        },
      ],
      monthPrice: [
        {
          month:3,
          day:11,
          price:2999
        },
        {
          month:3,
          day:12,
          price:29998
        },
        {
          month:3,
          day:13,
          price:29991
        },
        {
          month:3,
          day:14,
          price:28999
        },
        {
          month:3,
          day:15,
          price:28999
        }
      ],
    });
    const onConfirm = (value) => {
      show.value = false;
      date.value = formatDate(value);
    };
    // 日历点击确定后触发的事件
    const formatDate = (day) => {
      // 月份
      const month = day.getMonth() + 1;
      // 日子
      const date = day.getDate();
      // 星期几 0-6
      const whatDay = day.getDay()
      // 这天的价格
      // const dayPrice = day.bottomInfo()
        
      console.log("date", month, date,day);
      return day;
    };
    const selectTravelTime = (item, index) => {
      isSelect.value = index;
    };
    // 设置日历上每天的价格
    const setPrice = (day) => {
      // 获取当前的月份
      const month = day.date.getMonth() + 1;
      // 获取当前的日期
      const date = day.date.getDate();
      for(let i = 0; i<state.monthPrice.length; i++) {
        // console.log('111',state.monthPrice);
        if(month==state.monthPrice[i].month&&date==state.monthPrice[i].day) {
             day.bottomInfo = "￥" + state.monthPrice[i].price;
        }
      }
     
      return day;
    };
    return {
      ...toRefs(state),
      onConfirm,
      show,
      formatDate,
      selectTravelTime,
      isSelect,
      setPrice,
    };
  },
};
</script>
<style scoped>
.travel-info {
  background: #fff;
  margin-top: 10px;
  padding: 10px 15px;
}
.info-title {
  display: flex;
  justify-content: space-between;
}
.info-title .info-select {
  font-size: 16px;
  color: #000;
  font-weight: 600;
}
.info-title .info-start {
  color: #00bcd4;
  font-size: 12px;
  font-weight: 400;
}
.calendar {
  display: flex;
  margin-top: 10px;
}
.left-label {
  font-size: 12px;
  padding-right: 8px;
  flex-shrink: 0;
}
.left-label .iconfont {
  font-size: 12px;
}
.left-label span {
  background: url(../../assets/images/rect_bg.png) 100% 100%/48px 6px no-repeat;
  padding-left: 4px;
}
.middle-select {
  width: 220px;
  overflow-x: scroll;
  font-size: 12px;
  display: flex;
  flex-wrap: nowrap;
}
.middle-select .data-item {
  border-radius: 4px;
  background: #f5f5f5;
  margin-right: 8px;
  height: 47px;
  width: 76px;
  flex-shrink: 0;
  text-align: center;
  line-height: 20px;
  box-sizing: border-box;
  padding: 2px 0;
  position: relative;
}
.middle-select .data-item span {
  display: block;
}
.middle-select .data-item > span:nth-child(2) {
  color: #ff8300;
}
.right-more {
  background: #f5f5f5;
  border-radius: 4px;
  flex-shrink: 0;
  font-size: 12px;
  height: 47px;
  line-height: 17px;
  padding-top: 6px;
  text-align: center;
  width: 44px;
  margin-left: 10px;
  position: relative;
  right: -5px;
  box-sizing: border-box;
}
.right-more .iconfont {
  font-size: 12px;
}
.right-more span {
  display: block;
}

/* 组件被选中的样式 */
.actived {
  background: #f0fcfd !important;
  border: 1px solid rgb(177, 238, 243);
}
.data-item .tag {
  background-image: linear-gradient(133deg, #00ddea, #0dd3ec);
  border-radius: 8px 0 5px 0;
  bottom: 0;
  color: #fff;
  font-size: 12px;
  height: 15px;
  line-height: 15px;
  position: absolute;
  right: 0;
  text-align: center;
  width: 16px;
}
</style>
